<template>
  <el-select v-model="id" placeholder="请选择会员等级" @change="change"
             style="width: 100%">
    <el-option
      v-for="item in grades"
      :key="item.id"
      :label="item.code+'  (优惠比例: '+item.discounts+'%,起始消费: '+item.points+'元)'"
      :value="item.id">
    </el-option>
  </el-select>
</template>
<script>
  import AdminService from 'src/service/admin'
  import emitter from 'src/components/emitter'

  export default {
    name: 'HUserGradeSelect',
    mixins: [emitter],
    data() {
      return {
        id: null,
        grades: []
      }
    },
    props: {
      value: {    //传入一个用户对象
        type: Object,
        default: function () {
          return {
            vipId: null
          }
        }
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        this.id = newValue.vipId
      }
    },

    methods: {
      getDatas: function () {
        const me = this
        //获取用户等级信息
        AdminService.userGrade().then(datas => {
          if (datas != null) {
            me.grades = datas.datas
          }
        })
      },
      change: function (item) {
        if (item > 0) {
          const datas = this.grades.filter(data => {
            return data.id === item
          })
          this.value.vipId = item
          this.$emit('change', datas[0])
          this.dispatch('ElFormItem', 'el.form.change', [item])
        }
      }
    },
    beforeMount: function () {
      this.getDatas()
      this.id = this.value.vipId
    }
  }
</script>
